<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>主页</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/blog_detail.css"/>
    <link rel="stylesheet" href="css/down-id.css"/>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="image/log.png" alt=""/>
    <span class="title">CFBlog</span>
    <!-- 使用 span 把左右两侧的元素给撑开 -->
    <span class="spacer"></span>
    <a href="index.html">主页</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧区域，显示用户信息 -->
    <div class="container-left">
        <!-- 用户详情 -->
        <div class="card">
            <!-- 用户的头像 -->
            <img src="image/head.jpg" alt=""/>
            <!-- 用户名 -->
            <h3>春风能解释</h3>
            <!-- 其它信息 -->
            <a href="https://github.com/2516649281">GitHub 地址</a>
            <a href="https://gitee.com/cfnjs20020602">Gitee 地址</a>
            <a>QQ:2516649281</a>
        </div>
        <!-- 文章分类 -->
        <div class="counter">
            <span>文章</span>
            <span>分类</span>
        </div>
        <div class="counter">
            <span>3</span>
            <span>1</span>
        </div>
    </div>
</div>
<!-- 右侧区域，显示博客列表 -->
<div class="container-right">
    <!-- 使用这个 div 来放博客内容 -->
    <div class="blog-content">
        <!-- 博客的标题 -->
        <h3>悦跑校园</h3>
        <!-- 博客的日期 -->
        <div class="date">2023-1-11</div>
        <!-- 博客的内容 -->
        <div class="detail"></div>
    </div>
</div>
<div class="down">
    <a target="_blank" href="https://beian.miit.gov.cn/shouye.html" style="">
        <p>鄂ICP备2023000084号-1</p></a
    >
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42282202000149"
    ><img src="./image/备案图标.png" style="float: left"/>
        <p>鄂公网安备 42282202000149号</p></a
    >
</div>
</body>
</html>
